<template>
  <div class="personal-profile page-container">
    <div class="bg">
      <h2>个人档案查询</h2>

      <!-- 查找和筛选区域 -->
      <div class="search-filter-container">
        <!-- 查找区域 -->
        <div class="search-form">
          <div class="search-input-group">
            <label>姓名查找：</label>
            <input v-model="searchName" placeholder="输入姓名" />
          </div>
          <div class="search-input-group">
            <label>班级查找：</label>
            <input v-model="searchClass" placeholder="输入班级" />
          </div>
          <button @click="searchProfile" class="search-button">查询</button>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-form">
          <!-- 基本信息筛选 -->
          <div class="filter-section">
            <h3 class="filter-section-title">基本信息筛选</h3>

            <div class="filter-group">
              <label>专业筛选：</label>
              <div class="filter-options">
                <div
                  v-for="major in majors"
                  :key="major.value"
                  class="filter-option"
                  :class="{ active: selectedMajor === major.value }"
                  @click="selectMajor(major.value)"
                >
                  {{ major.label }}
                </div>
              </div>
            </div>



            <div class="filter-group">
              <label>组别筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in groupOptions"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selectedGroup === option.value }"
                  @click="selectGroup(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
          </div>

          <!-- 学习情况筛选 -->
          <div class="filter-section">
            <h3 class="filter-section-title">学习情况筛选</h3>

            <div class="filter-group">
              <label>成绩筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in gradeRangeOptions"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selectedGradeRange === option.value }"
                  @click="selectGradeRange(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
          </div>

          <!-- 生活情况筛选 -->
          <div class="filter-section">
            <h3 class="filter-section-title">生活情况筛选</h3>

            <div class="filter-group">
              <label>请假次数筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in leaveCountOptions"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selectedLeaveCount === option.value }"
                  @click="selectLeaveCount(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>

            <div class="filter-group">
              <label>外出次数筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in outCountOptions"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selectedOutCount === option.value }"
                  @click="selectOutCount(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>

            <div class="filter-group">
              <label>内务检查平均分筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in housekeepingRangeOptions"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selectedHousekeepingRange === option.value }"
                  @click="selectHousekeepingRange(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
          </div>

          <!-- 健康情况筛选 -->
          <div class="filter-section">
            <h3 class="filter-section-title">健康情况筛选</h3>

            <div class="filter-group">
              <label>988就医次数筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in medical988Options"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selected988Count === option.value }"
                  @click="select988Count(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>

            <div class="filter-group">
              <label>体测不及格项数筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in physicalTestOptions"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selectedPhysicalTestRange === option.value }"
                  @click="selectPhysicalTestRange(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
          </div>

          <!-- 工作情况筛选 -->
          <div class="filter-section">
            <h3 class="filter-section-title">工作情况筛选</h3>

            <div class="filter-group">
              <label>晚加班次数筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in nightWorkOptions"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selectedNightWorkRange === option.value }"
                  @click="selectNightWorkRange(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>

            <div class="filter-group">
              <label>公差次数筛选：</label>
              <div class="filter-options">
                <div
                  v-for="option in publicDutyOptions"
                  :key="option.value"
                  class="filter-option"
                  :class="{ active: selectedPublicDutyRange === option.value }"
                  @click="selectPublicDutyRange(option.value)"
                >
                  {{ option.label }}
                </div>
              </div>
            </div>
          </div>

          <!-- 风险等级筛选 -->

        </div>
      </div>

      <!-- 多人结果列表 -->
      <div v-if="filteredStudents.length > 0" class="search-results">
        <h3>找到 {{ filteredStudents.length }} 个符合条件的学生</h3>
        <div class="student-cards">
          <div
            v-for="(student, index) in filteredStudents"
            :key="index"
            class="student-card"
            @click="viewStudentDetail(student)"
          >
            <div class="student-card-header">
              <span class="student-name">{{ student.name }}</span>
              <span class="student-league"
                :class="getPoliticalClass(student.political)">
                {{ student.political }}
              </span>
            </div>
            <div class="student-card-body">
              <p><span class="label">组别/班级：</span>{{ student.groupName }}组 / {{ student.classes }}班</p>
              <p><span class="label">学号：</span>{{ student.studentId }}</p>
              <p>
                <span class="label">专业：</span>
                <span class="major-tag" :class="getMajorClass(student.major)">
                  {{ student.major }}
                </span>
              </p>
            </div>
            <div class="student-card-footer">
              <button class="view-detail-btn">查看详情</button>
            </div>
          </div>
        </div>
      </div>

      <div v-if="searchPerformed && filteredStudents.length === 0" class="no-results">
        未找到匹配的学生档案
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'PersonalProfile',
  data() {
    return {
      students: [],
      searchName: '',
      searchClass: '',
      searchPerformed: false,
      selectedMajor: 'all',
      selectedGroup: 'all',
      selectedLeaveCount: 'all',
      selectedOutCount: 'all',
      selected988Count: 'all',
      selectedGradeRange: 'all',
      selectedHousekeepingRange: 'all',
      selectedPhysicalTestRange: 'all',
      selectedNightWorkRange: 'all',
      selectedPublicDutyRange: 'all',


      // 筛选选项

      // 专业
      majors: [
        { label: '全部专业', value: 'all' },
        { label: '信息工程', value: '信息工程' },
        { label: '网电工程', value: '网电工程' },
        { label: '侦测工程', value: '侦测工程' },
        { label: '水声工程', value: '水声工程' },
        { label: '人工智能', value: '人工智能' },
        { label: '通信工程', value: '通信工程' }
      ],
      // 组别
      groupOptions: [
        { label: '全部组别', value: 'all' },
        { label: '1组', value: '1' },
        { label: '2组', value: '2' },
        { label: '3组', value: '3' }
      ],
      // 请假次数-->B
      leaveCountOptions: [
        { label: '全部', value: 'all' },
        { label: '<3次', value: 'B4' },
        { label: '3-6次', value: 'B3' },
        { label: '6-10次', value: 'B2' },
        { label: '10+次', value: 'B1' }
      ],
      // 外出次数-->C
      outCountOptions: [
        { label: '全部', value: 'all' },
        { label: '0次', value: 'C4' },
        { label: '1次', value: 'C3' },
        { label: '2次', value: 'C2' },
        { label: '3+次', value: 'C1' }
      ],
      // 988就医次数-->E
      medical988Options: [
        { label: '全部', value: 'all' },
        { label: '0次', value: 'E4' },
        { label: '1次', value: 'E3' },
        { label: '2次', value: 'E2' },
        { label: '3+次', value: 'E1' }
      ],
      // 成绩-->A
      gradeRangeOptions: [
        { label: '全部', value: 'all' },
        { label: '90+', value: 'A1' },
        { label: '70-90', value: 'A2' },
        { label: '60-70', value: 'A3' },
        { label: '60-', value: 'A4' }
      ],
      // 内务检查平均分-->D
      housekeepingRangeOptions: [
        { label: '全部', value: 'all' },
        { label: '90+', value: 'D1' },
        { label: '70-90', value: 'D2' },
        { label: '60-70', value: 'D3' },
        { label: '60-', value: 'D4' }
      ],
      // 体测不及格项数-->F
      physicalTestOptions: [
        { label: '全部', value: 'all' },
        { label: '0项', value: 'F4' },
        { label: '1项', value: 'F3' },
        { label: '2项', value: 'F2' },
        { label: '3+项', value: 'F1' }
      ],
      // 晚加班次数-->G
      nightWorkOptions: [
        { label: '全部', value: 'all' },

        { label: '1-8次', value: 'G4' },
        { label: '8-12次', value: 'G3' },
        { label: '12-20次', value: 'G2' },
        { label: '20+次', value: 'G1' }
      ],
      // 公差次数-->H
      publicDutyOptions: [
        { label: '全部', value: 'all' },
        { label: '0-3次', value: 'H4' },
        { label: '3-10次', value: 'H3' },
        { label: '10-18次', value: 'H2' },
        { label: '18+次', value: 'H1' }
      ],
      loading: true
    };
  },
  computed: {
    filteredStudents() {
      if (!this.searchPerformed &&
          this.selectedMajor === 'all' &&
          this.selectedGroup === 'all' &&
          this.selectedLeaveCount === 'all' &&
          this.selectedOutCount === 'all' &&
          this.selected988Count === 'all' &&
          this.selectedGradeRange === 'all' &&
          this.selectedHousekeepingRange === 'all' &&
          this.selectedPhysicalTestRange === 'all' &&
          this.selectedNightWorkRange === 'all' &&
          this.selectedPublicDutyRange === 'all') {
        return [];
      }

      return this.students.filter(student => {
        // 姓名匹配
        const nameMatch = this.searchName.trim() === '' ||
                         student.name.toLowerCase().includes(this.searchName.trim().toLowerCase());

        // 班级匹配，精确区分"1班"和"10班"
        let classMatch = false;
        if (this.searchClass.trim() === '') {
          classMatch = true;
        } else {
          const searchClassTrimmed = this.searchClass.trim();
          const classStr = String(student.classes || '');

          // 精确匹配班级数字，避免"1班"和"10班"混淆
          if (searchClassTrimmed.match(/^\d+$/)) {
            // 如果搜索条件是纯数字，则进行精确匹配
            classMatch = Number(classStr) === Number(searchClassTrimmed);
          } else {
            // 如果搜索条件不是纯数字，则使用包含关系进行模糊匹配
            classMatch = classStr.includes(searchClassTrimmed);
          }
        }

        // 专业匹配
        let majorMatch = true;
        if (this.selectedMajor !== 'all') {
          majorMatch = student.major === this.selectedMajor;
        }

        // 组别匹配
        let groupMatch = true;
        if (this.selectedGroup !== 'all') {
          groupMatch = student.groupName === this.selectedGroup;
        }

        // 请假次数匹配
        let leaveCountMatch = true;
        if (this.selectedLeaveCount !== 'all') {
          leaveCountMatch = student.leaveLevel === this.selectedLeaveCount;
        }

        // 外出次数匹配
        let outCountMatch = true;
        if (this.selectedOutCount !== 'all') {
          outCountMatch = student.outLevel === this.selectedOutCount;
        }

        // 988就医次数匹配
        let medical988Match = true;
        if (this.selected988Count !== 'all') {
          medical988Match = student.visitLevel === this.selected988Count;
        }

        // 成绩匹配
        let gradeMatch = true;
        if (this.selectedGradeRange !== 'all') {
          gradeMatch = student.scoreLevel === this.selectedGradeRange;
        }

        // 内务检查匹配
        let housekeepingMatch = true;
        if (this.selectedHousekeepingRange !== 'all') {
          housekeepingMatch = student.houseLevel === this.selectedHousekeepingRange;
        }

        // 体测匹配
        let physicalTestMatch = true;
        if (this.selectedPhysicalTestRange !== 'all') {
          physicalTestMatch = student.sportLevel === this.selectedPhysicalTestRange;
        }

        // 晚加班次数匹配
        let nightWorkMatch = true;
        if (this.selectedNightWorkRange !== 'all') {
          nightWorkMatch = student.overtimeLevel === this.selectedNightWorkRange;
        }

        // 公差次数匹配
        let publicDutyMatch = true;
        if (this.selectedPublicDutyRange !== 'all') {
          publicDutyMatch = student.businessLevel === this.selectedPublicDutyRange;
        }

        return nameMatch && classMatch && majorMatch &&
               groupMatch && leaveCountMatch && outCountMatch && medical988Match &&
               gradeMatch && housekeepingMatch && physicalTestMatch &&
               nightWorkMatch && publicDutyMatch;
      });
    }
  },
  mounted() {
    this.loadStudentData();
  },
  methods: {
    async loadStudentData() {
      this.loading = true;
      try {
        // 构建flag参数
        const flags = [];
        if (this.selectedGradeRange !== 'all') flags.push(this.selectedGradeRange);
        if (this.selectedLeaveCount !== 'all') flags.push(this.selectedLeaveCount);
        if (this.selectedOutCount !== 'all') flags.push(this.selectedOutCount);
        if (this.selectedHousekeepingRange !== 'all') flags.push(this.selectedHousekeepingRange);
        if (this.selected988Count !== 'all') flags.push(this.selected988Count);
        if (this.selectedPhysicalTestRange !== 'all') flags.push(this.selectedPhysicalTestRange);
        if (this.selectedNightWorkRange !== 'all') flags.push(this.selectedNightWorkRange);
        if (this.selectedPublicDutyRange !== 'all') flags.push(this.selectedPublicDutyRange);

        // 构建后端需要的筛选条件
        const filterConditions = {
          name: this.searchName.trim(),
          classes: this.searchClass.trim(),
          groupName: this.selectedGroup === 'all' ? '' : this.selectedGroup,
          major: this.selectedMajor === 'all' ? '' : this.selectedMajor,
          flag: flags.join(',')
        };

        const response = await this.$studentapi.getStudents(filterConditions);
        if (response && response.code === '200' && response.data) {
          this.students = response.data.map(stu => ({
            id: stu.id || '',
            name: stu.name || '',
            classes: stu.classes || '',
            studentId: stu.studentId || '',
            major: stu.major || '',
            identity: stu.identity || '',
            gender: stu.gender || '',
            age: stu.age || 0,
            political: stu.political || '',
            singleParent: stu.singleParent || '',
            doubleCompetition: stu.doubleCompetition || '',
            position: stu.position || '',
            groupName: stu.groupName || '',
            createDate: stu.createDate || '',
            leaveLevel: stu.leaveLevel,
            outLevel: stu.outLevel,
            visitLevel: stu.visitLevel,
            scoreLevel: stu.scoreLevel,
            houseLevel: stu.houseLevel,
            sportLevel: stu.sportLevel,
            overtimeLevel: stu.overtimeLevel,
            businessLevel: stu.businessLevel,
            warningLevel: stu.warningLevel || ''
          }));
        } else {
          this.students = [];
        }
      } catch (error) {
        this.students = [];
        console.error('加载学生数据出错:', error);
      } finally {
        this.loading = false;
      }
    },

    searchProfile() {
      this.searchPerformed = true;
    },

    selectMajor(major) {
      this.selectedMajor = major;
      this.searchPerformed = true;
      this.loadStudentData();
    },



    selectGroup(group) {
      this.selectedGroup = group;
      this.searchPerformed = true;
    },

    selectLeaveCount(count) {
      this.selectedLeaveCount = count;
      this.searchPerformed = true;
    },

    selectOutCount(count) {
      this.selectedOutCount = count;
      this.searchPerformed = true;
    },

    select988Count(count) {
      this.selected988Count = count;
      this.searchPerformed = true;
    },

    selectGradeRange(range) {
      this.selectedGradeRange = range;
      this.searchPerformed = true;
    },

    selectHousekeepingRange(range) {
      this.selectedHousekeepingRange = range;
      this.searchPerformed = true;
    },

    selectPhysicalTestRange(range) {
      this.selectedPhysicalTestRange = range;
      this.searchPerformed = true;
    },

    selectNightWorkRange(range) {
      this.selectedNightWorkRange = range;
      this.searchPerformed = true;
    },

    selectPublicDutyRange(range) {
      this.selectedPublicDutyRange = range;
      this.searchPerformed = true;
    },

    // 为不同专业设置不同的样式类
    getMajorClass(major) {
      switch (major) {
        case '信息工程': return 'major-info';
        case '网电工程': return 'major-network';
        case '侦测工程': return 'major-detect';
        case '水声工程': return 'major-aquatic';
        case '人工智能': return 'major-artificial';
        case '通信工程': return 'major-communication';
        default: return '';
      }
    },

    // 为不同政治面貌设置不同的样式类
    getPoliticalClass(political) {
      switch (political) {
        case '共青团员':
          return 'political-league'; // 绿色
        case '预备党员':
          return 'political-probationary'; // 黄色
        case '共产党员':
          return 'political-communist'; // 橙色
        case '群众':
          return 'political-masses'; // 灰色
        default:
          return 'political-unknown';
      }
    },

    viewStudentDetail(student) {
      // 跳转到学生详情页面
      this.$router.push({
        name: 'student-detail',
        params: { id: student.studentId }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

.personal-profile {
  background: url('~@/assets/pageBg.png') no-repeat center center;
  background-size: cover;

  .search-filter-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }

  .search-form {
    background-color: rgba(19, 25, 47, 0.8);
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #68d8fe;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;

    .search-input-group {
      display: flex;
      align-items: center;

      label {
        color: #68d8fe;
        margin-right: 10px;
        font-weight: bold;
        font-size: 20px !important;
      }

      input {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #68d8fe;
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        width: 150px;

        &::placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }

    .search-button {
      background: #68d8fe;
      color: #13192f;
      border: none;
      padding: 8px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      font-size: 20px !important;
      margin-left: auto;

      &:hover {
        background: #4bc8fe;
      }
    }
  }

  .filter-form {
    background-color: rgba(19, 25, 47, 0.8);
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #68d8fe;
    max-height: 400px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 8px;
      background: rgba(19,25,47,0.3);
      border-radius: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(19,25,47,0.3);
      border-radius: 8px;
    }

    &::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
      border-radius: 8px;
    }

    .filter-section {
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px dashed rgba(104, 216, 254, 0.3);

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .filter-section-title {
        color: #68d8fe;
        font-size: 22px !important;
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(104, 216, 254, 0.5);
      }
    }

    .filter-group {
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }

      label {
        display: block;
        color: #68d8fe;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 18px !important;
      }

      .filter-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .filter-option {
          padding: 6px 12px;
          background-color: rgba(19, 25, 47, 0.6);
          border: 1px solid rgba(104, 216, 254, 0.3);
          border-radius: 4px;
          color: #d3d6dd;
          cursor: pointer;
          transition: all 0.3s;
          font-size: 16px !important;

          &:hover {
            background-color: rgba(104, 216, 254, 0.1);
          }

          &.active {
            background-color: rgba(104, 216, 254, 0.2);
            border-color: rgba(104, 216, 254, 0.8);
            color: #68d8fe;
            font-weight: bold;
          }
        }
      }
    }
  }

  h2 {
    color: #68d8fe;
    margin-bottom: 20px;
    font-size: 32px !important;
  }

  h3 {
    color: #68d8fe;
    margin-bottom: 20px;
    font-size: 24px !important;
  }

  .search-results {
    background-color: rgba(19, 25, 47, 0.8);
    border: 1px solid #68d8fe;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;

    .student-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      max-height: 500px;
      overflow-y: auto;
      padding-right: 10px;

      &::-webkit-scrollbar {
        width: 8px;
        background: rgba(19,25,47,0.3);
        border-radius: 8px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(19,25,47,0.3);
        border-radius: 8px;
      }

      &::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
        border-radius: 8px;
      }

      .student-card {
        background-color: rgba(19, 25, 47, 0.6);
        border: 1px solid rgba(104, 216, 254, 0.3);
        border-radius: 4px;
        overflow: hidden;
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(104, 216, 254, 0.2);
          border-color: rgba(104, 216, 254, 0.8);
        }

        .student-card-header {
          background-color: rgba(104, 216, 254, 0.1);
          padding: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid rgba(104, 216, 254, 0.3);

          .student-name {
            font-size: 24px !important;
            font-weight: bold;
            color: #fff;
          }

          .student-league {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 14px;
            &.political-league {
              background-color: rgba(103, 194, 58, 0.2);
              color: #67c23a;
            }
            &.political-probationary {
              background-color: rgba(230, 162, 60, 0.2);
              color: #e6a23c;
            }
            &.political-communist {
              background-color: rgba(245, 108, 108, 0.2);
              color: #f56c6c;
            }
            &.political-masses {
              background-color: rgba(144, 147, 153, 0.2);
              color: #909399;
            }
            &.political-unknown {
              background-color: rgba(104, 216, 254, 0.1);
              color: #68d8fe;
            }
          }


        }

        .student-card-body {
          padding: 15px;

          p {
            margin: 8px 0;
            color: #d3d6dd;
            font-size: 18px !important;

            .label {
              color: #68d8fe;
              font-weight: bold;
              margin-right: 5px;
            }

            .major-tag {
              display: inline-block;
              padding: 2px 6px;
              border-radius: 3px;
              font-size: 13px;
              font-weight: bold;

              &.major-info {
                background-color: rgba(64, 158, 255, 0.1);
                color: #409eff;
                border: 1px solid rgba(64, 158, 255, 0.2);
              }

              &.major-network {
                background-color: rgba(144, 147, 153, 0.1);
                color: #909399;
                border: 1px solid rgba(144, 147, 153, 0.2);
              }

              &.major-detect {
                background-color: rgba(230, 162, 60, 0.1);
                color: #e6a23c;
                border: 1px solid rgba(230, 162, 60, 0.2);
              }

              &.major-aquatic {
                background-color: rgba(103, 194, 58, 0.1);
                color: #67c23a;
                border: 1px solid rgba(103, 194, 58, 0.2);
              }

              &.major-artificial {
                background-color: rgba(245, 108, 108, 0.1);
                color: #f56c6c;
                border: 1px solid rgba(245, 108, 108, 0.2);
              }

              &.major-communication {
                background-color: rgba(121, 87, 213, 0.1);
                color: #7957d5;
                border: 1px solid rgba(121, 87, 213, 0.2);
              }
            }
          }
        }

        .student-card-footer {
          padding: 15px;
          text-align: center;
          border-top: 1px solid rgba(104, 216, 254, 0.3);

          .view-detail-btn {
            background-color: rgba(104, 216, 254, 0.2);
            color: #68d8fe;
            border: 1px solid rgba(104, 216, 254, 0.5);
            padding: 6px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;

            &:hover {
              background-color: rgba(104, 216, 254, 0.3);
              border-color: rgba(104, 216, 254, 0.8);
            }
          }
        }
      }
    }
  }

  .no-results {
    color: #ff6b6b;
    background-color: rgba(19, 25, 47, 0.8);
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid rgba(255, 107, 107, 0.5);
  }
}

.student-detail .custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #68d8fe rgba(19,25,47,0.3);
}
.student-detail .custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  background: rgba(19,25,47,0.3);
  border-radius: 8px;
}
.student-detail .custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
  border-radius: 8px;
}
.student-detail .custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(19,25,47,0.3);
  border-radius: 8px;
}
</style>
